<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计算属性应用场景</title>
</head>

<body>

  <div id="app">
    <!-- 1. 使用拼接计算的方式求出 -->
    <!-- 显然此方法太过愚蠢了些，那这时我们又该怎么办呢？当当当当！计算属性！！！ -->
    <h3>拼接求总价格: {{ books[0].price + books[1].price + books[2].price + books[3].price }} 元</h3>

    <!-- 2. 计算属性 -->
    <h3>计算属性求总价格: {{ totalPrice }} 元</h3>
  </div>

  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        books: [
          { id: 1, name: '深入理解计算机原理', price: 120 },
          { id: 2, name: 'Unix编程艺术', price: 100 },
          { id: 3, name: '代码大全', price: 80 },
          { id: 4, name: '现代操作系统', price: 99 },
        ]
      },

      computed: {
        // 通过计算属性的返回值求得书本列表总价格并返回
        totalPrice: function () {
          let price = 0;
          this.books.map(item => price += item.price);
          return price;
        }
      }
    })
  </script>
</body>

</html>